<template>
    <div>
      <div class="top_image">
        <img src="http://rzico.oss-cn-shenzhen.aliyuncs.com/portal/callBg.png" style="width: 100%;height: 100%;display: block">
      </div>
      <div>
        <div class="contact_bottom_content">

           <div class="contact_text_content">
             <span class="contact_title" style="display: block">尊敬的访客:</span>
             <div style="margin-top: 10px">
                <span  class="contact_text" >欢迎您进入莆田餐巴，感谢您对厦门睿商科技有限公司的信赖，当您进
                    入到此页面时，您已成为我们尊贵的客人，您可以通过以下几种方式
                    与我们取得联系。
              </span>
             </div>

           </div>
           <div class="contact_call_content">
              <div class="call_item">
                  <img src="http://rzico.oss-cn-shenzhen.aliyuncs.com/portal/phone.png" class="call_image">
                  <span class="call_type_text">手机号码</span>
                  <span class="call_type_text">13547895423</span>
              </div>
             <div class="call_item">
               <img src="http://rzico.oss-cn-shenzhen.aliyuncs.com/portal/wechat.png" class="call_image">
               <span class="call_type_text">微信号码</span>
               <span class="call_type_text">13547895423</span>
             </div>
             <div class="call_item">
               <img src="http://rzico.oss-cn-shenzhen.aliyuncs.com/portal/email.png" class="call_image">
               <span class="call_type_text">联系邮箱</span>
               <span class="call_type_text">1564231112@qq.com</span>
             </div>
             <div class="call_item">
               <img src="http://rzico.oss-cn-shenzhen.aliyuncs.com/portal/address.png" class="call_image">
               <span class="call_type_text" >公司地址</span>
               <span class="call_type_text" style="line-height: 12px">厦门市思明区龙山中路嘉莲街道启达时尚大厦220</span>
             </div>
           </div>
          <img src="http://rzico.oss-cn-shenzhen.aliyuncs.com/portal/addressIMG.png" class="address_image">
        </div>
      </div>
    </div>
</template>

<script>
  export default {
    name: 'contact'
  }
</script>

<style scoped>
  @media (max-width: 750px){
    .contact_bottom_content{
      width: 100%;
      background-color: white;
      padding-top: 24px;
      padding-bottom: 24px;
      padding-right: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding-left: 20px;
      box-sizing: border-box;
    }
    .contact_text{
      font-size: 16px;
      letter-spacing:5px;
      font-family: SimSun;
      font-weight: 400;
      line-height: 30px;
      color: #717171;
    }
    .contact_title{
      font-size: 16px;
      font-family: SimSun;
      font-weight: 400;
      color: #717171;
    }
    .contact_text_content{
      width: 300px;
    }
    .contact_call_content{
      display: flex;
      margin-top: 40px;
      width: 300px;

      overflow-x: auto;
      justify-content: space-between;
      align-items: center;
    }
    .call_item{
      flex-shrink: 0;
      width: 180px;
      height: 120px;
      padding: 5px;
      box-sizing: border-box;
      border: 1px solid rgba(0,0,0,0.1);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .call_image{
      height: 30px;
      width: 30px;
    }
    .address_image{
      width: 100%;
      margin-top: 20px;
    }
    .call_type_text{
      font-size: 12px;
      /*color: rgba(0,0,0,0.3);*/
      line-height: 20px;
    }
  }
  @media (min-width: 750px){
    .contact_bottom_content{
      width: 100%;
      background-color: white;
      padding-top: 24px;
      padding-bottom: 24px;
      padding-right: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding-left: 20px;
      box-sizing: border-box;
    }
    .contact_text{
      font-size: 20px;
      letter-spacing:5px;
      font-family: SimSun;
      font-weight: 400;
      line-height: 30px;
      color: #717171;
    }
    .contact_title{
      font-size: 20px;
      font-family: SimSun;
      font-weight: 400;
      color: #717171;
    }
    .contact_text_content{
      width: 750px;
    }
    .contact_call_content{
      display: flex;
      margin-top: 40px;
      width: 750px;
      justify-content: space-between;
      align-items: center;
    }
    .call_item{
      width: 180px;
      height: 120px;
      padding: 5px;
      box-sizing: border-box;
      border: 1px solid rgba(0,0,0,0.1);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .call_image{
      height: 30px;
      width: 30px;
    }
    .address_image{
      width: 750px;
      margin-top: 20px;
    }
    .call_type_text{
      font-size: 12px;
      /*color: rgba(0,0,0,0.3);*/
      line-height: 20px;
    }
  }

</style>
